<div id='main'>
    <div class="col-sm-12 text-left">
        <div class="row featurette">
            <div class="col-md-12">
                <h2 class="featurette-heading"><img src="logo.svg" width="200" height="200" alt="XZG logo"></h2>
                <p class="lead text-center"><span data-i18n="p.ab.l1"></span><br>
                    <span data-i18n="p.ab.l2"></span>
                </p>
                <p data-i18n="p.ab.l3"></p>
            </div>
        </div>
        <hr class="featurette-divider">
    </div>

    <div class="container px-4" id="icon-grid">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 py-5">

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#info-square"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.w.t"></h4>
                    <p data-i18n="p.ab.w.m"></p>
                    <p class="text-center">
                        <a class="about_link" href="https://xzg.xyzroe.cc" target=" _blank" data-i18n="p.ab.w.l"></a>
                    </p>
                </div>
            </div>

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#people"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.cm.t"></h4>
                    <p data-i18n="p.ab.cm.m"></p>
                    <p class="text-center">
                        <a class="about_link" href="https://t.me/xzg_fw" target="_blank">
                            <svg class="card_icon py-1" viewBox="0 0 16 16">
                                <use xlink:href="icons.svg#telegram"></use><span data-i18n="p.ab.cm.l"></span>
                            </svg>
                        </a><br>
                        <a class="about_link" href="https://discord.gg/A5ge3cYRKW" target="_blank">
                            <svg class="card_icon py-1" viewBox="0 0 16 16">
                                <use xlink:href="icons.svg#discord"></use><span data-i18n="p.ab.cm.d"></span>
                            </svg>
                        </a>
                    </p>
                </div>
            </div>

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#exclamation-triangle"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.r.t"></h4>
                    <p data-i18n="p.ab.r.m"></p>
                    <p class="text-center">
                        <a class="about_link" href="https://github.com/xyzroe/XZG/issues/new/choose" target="_blank"
                            data-i18n="p.ab.r.l"></a>
                    </p>
                </div>
            </div>

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#github"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.c.t"></h4>
                    <p data-i18n="p.ab.c.m"></p>
                    <p class="text-center">
                        <a class="about_link" href="https://github.com/xyzroe/xzg" target="_blank"
                            data-i18n="p.ab.c.l"></a>
                    </p>
                </div>
            </div>

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#link"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.s.t"></h4>
                    <p data-i18n="p.ab.s.m"></p>
                    <p class="text-center">
                        <a class="about_link" href="https://github.com/xyzroe/" target="_blank">
                            <svg class="card_icon py-1" viewBox="0 0 16 16">
                                <use xlink:href="icons.svg#github"></use>
                            </svg>GitHub
                        </a><br>
                        <a class="about_link" href="https://www.paypal.com/paypalme/xyzroe" target="_blank">
                            <svg class="card_icon py-1" viewBox="0 0 16 16">
                                <use xlink:href="icons.svg#paypal"></use>
                            </svg>PayPal
                        </a><br>
                        <a class="about_link" href="https://www.buymeacoffee.com/xyzroe" target="_blank">
                            <svg class="card_icon py-1" viewBox="0 0 16 16">
                                <use xlink:href="icons.svg#coffee"></use>
                            </svg>Buy Me a Coffee
                        </a>
                    </p>
                </div>
            </div>

            <div class="col d-flex align-items-start">
                <div><svg class="about_icon" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#download"></use>
                    </svg></div>
                <div>
                    <h4 class="fw-bold mb-0" data-i18n="p.ab.f.t"></h4>
                    <p data-i18n="p.ab.f.m"></p>
                    <p class="text-center" style="color: var(--link-color)">
                        <a class="about_link" href="https://github.com/xyzroe" target="_blank">
                            <span data-i18n="p.ab.f.l"></span>
                        </a>
                    </p>
                </div>
            </div>

        </div>
    </div>

</div>